<template>
	<!-- 展示所有的可选项 -->
	<!-- 响应式：数据变化引起页面变化，v-model可以将数组中选项自动勾上 -->
	<!-- 逆响应式：页面变化（用户点击、选择。。。）能不能引起数据变化？
	     v-model绑定了数组后，打勾会将选框的value值加到数组中-->
	<!-- 具备双向响应式的指令：v-model -->
	<div>
		<template v-for="(item, index) in arr" :key="index">
			<!-- 将多个选框串成一个字段，要么使用相同的name属性 -->
			<!-- 将多个选框串成一个字段，vue中可以用
			     v-model绑定一个共同的数组（ref定义的） -->
			<input v-model="list" type="checkbox" :value="item"/>{{ item }}
		</template>
	</div>
	<!-- 展示已经勾选的选项 -->
	<ul>
		<li v-for="(item, index) in list" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

<script setup>
import { reactive, ref } from 'vue'
const arr = reactive(["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"])
const list = ref(['科幻', '军事'])
</script>

<style scoped>
	
</style>